<template>
	<div class="main-con">
		<div class="searches-wrapper">
			<el-form class="queryForm" :model="queryFormData" ref="queryForm" label-width="80px" :inline="true" size="small" label-suffix=": ">
				<el-form-item prop="orderTitle" label="申请标题">
					<el-input v-model="queryFormData.orderTitle" placeholder="请输入"></el-input>
				</el-form-item>
				<el-form-item prop="state" label="资产状态">
					<el-select v-model="queryFormData.state" placeholder="请选择" clearable filterable>
						<el-option v-for="item in stateOptions" :key="item.code" :label="item.name" :value="item.code"> </el-option>
					</el-select>
				</el-form-item>
				<el-form-item prop="proName" label="所属项目">
					<el-input v-model="queryFormData.proName" placeholder="请输入"></el-input>
				</el-form-item>
				<el-form-item class="form-item-btn">
					<el-button type="default" @click="resetQueryForm">重置</el-button>
					<el-button type="primary" @click="loadData">查询</el-button>
					<!-- <el-button type="text" @click="showMore">{{ formBtnText }} <i class="el-icon-arrow-down"></i></el-button> -->
				</el-form-item>
			</el-form>
		</div>
		<div class="card-table">
			<div class="card-title">
				<div class="title-con">
					资产列表
				</div>
				<el-button v-has-perm="['add_asset']" type="primary" size="mini" @click="addAsset">新建资产登记</el-button>
			</div>
			<el-table ref="tabRef" class="systemTable" :data="dataSource" v-loading="loading" stripe :height="tableHeight">
				<el-table-column type="selection" width="55"></el-table-column>
				<el-table-column prop="orderNum" label="单据编号" width="210">
					<template v-slot="{ row }">
						<span style="color: #0096FF;">{{ row.orderNum }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="orderTitle" label="登记申请标题" min-width="150" show-overflow-tooltip></el-table-column>
				<el-table-column prop="assetCount" label="登记资产数量" width="115"></el-table-column>
				<el-table-column prop="proName" label="所属项目" min-width="120" show-overflow-tooltip></el-table-column>
				<el-table-column prop="proLeaderName" label="项目负责人" width="100"></el-table-column>
				<el-table-column prop="createUserName" label="操作人" width="90"></el-table-column>
				<el-table-column prop="createTime" label="操作时间" width="120">
					<template v-slot="{ row }">
						{{ dateFormat(row.createTime) }}
					</template>
				</el-table-column>
				<el-table-column prop="stateName" label="状态" width="95">
					<template v-slot="{ row }">
						<span :class="`stateColor${row.state}`">
							●
						</span>
						{{ row.stateName }}
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center" width="190" fixed="right">
					<template v-slot="{ row }">
						<el-button v-if="rowBtnHasPerm(['add_QRCODE'], row.state == '2')" class="text-btn-table" type="text" @click="showQRCode(row)">二维码</el-button>
						<el-button v-if="rowBtnHasPerm(['add_recall'], row.state == '1')" class="text-btn-table" type="text" @click="recallAsset(row)">撤回</el-button>
						<!-- <el-button v-has-perm="['add_agree']" v-show="row.state == '1'" class="text-btn-table" type="text" @click="passHandler(row)">通过</el-button> -->
						<el-button v-if="rowBtnHasPerm(['add_agree'], row.state == '1')" class="text-btn-table" type="text" @click="passHandler(row)">通过</el-button>
						<el-button v-if="rowBtnHasPerm(['add_scrap'], row.state == '1')" class="text-btn-table" type="text" @click="rejectHandler(row)">驳回</el-button>
						<el-button v-if="rowBtnHasPerm(['add_edit'], row.state == '0' || row.state == '8')" class="text-btn-table" type="text" @click="editAsset(row)">编辑</el-button>
						<el-button v-if="rowBtnHasPerm(['add_del'], row.state == '0' || row.state == '8')" class="text-btn-table" type="text" @click="delAsset(row)">删除</el-button>
						<el-button v-if="rowBtnHasPerm(['add_reSubmit'], row.state == '3')" class="text-btn-table" type="text" @click="reSubmitAsset(row)">重新提交</el-button>
						<el-button v-if="rowBtnHasPerm(['add_info'], row.state != '0')" class="text-btn-table" type="text" @click="showAssetInfo(row)">详情</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				class="systemPagination"
				:current-page="pageParams.currentPage"
				:page-sizes="pageParams.pageSizes"
				:page-size="pageParams.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="pageParams.total"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
			>
			</el-pagination>
		</div>
		<el-dialog class="dialog" title="资产登记审核通过" :visible.sync="showAgreeWin" width="30%" :before-close="handleAgreeClose">
			<div style="font-size: 16px;font-family: PingFang SC;font-weight: 400;">
				您确定要通过本项目的资产信息登记审核？
			</div>
			<div style="font-size: 14px;font-family: PingFang SC;font-weight: 400;color: #666666;">项目名称：{{ selectRow.proName }}</div>
			<div slot="footer" class="dialog-footer">
				<el-button size="small" @click="handleAgreeClose">取消</el-button>
				<el-button size="small" type="primary" @click="onSubmitAgree">确认</el-button>
			</div>
		</el-dialog>
		<asset-flow-send v-if="showFlowSend" @close="closeFlowSend" :checkType="checkFlowType" @ok="FlowSendsave" :instNodeId="instNodeId" :sendtype="sendtype" :wfUrl="wfUrl"></asset-flow-send>
	</div>
</template>
<script>
	import singleTableMixin from '@/mixins/singleTableMixin'
	import assetFlowMixin from '@/mixins/assetFlowMixin'
	import assetApi from '@/api/assetApi'
	import { getAction, postAction } from '@/utils/httpUtil'
	import AssetFlowSend from '@/system/components/AssetFlowSend'
	export default {
		name: 'assetAddList',
		mixins: [singleTableMixin, assetFlowMixin],
		components: {
			AssetFlowSend,
		},
		data() {
			return {
				apiUrl: {
					list: assetApi.assetManage.assetList,
				},
				wfClassId: '',
				stateOptions: [
					{ code: null, name: '全部' },
					{ code: '0', name: '草稿' },
					{ code: '1', name: '待审核' },
					{ code: '2', name: '已通过' },
					{ code: '3', name: '审核驳回' },
					{ code: '8', name: '已撤回' },
				],
				showAgreeWin: false,
				// showFlowSend: false,
				// sendtype: null,
				wfUrl: {
					getSendToUrl: '/assetManage/getSendTo',
					sendToUrl: '/assetManage/sendTo',
					getBackToUrl: '/assetManage/getBackTo',
					backToUrl: '/assetManage/backTo',
				},
				// checkType: 0,
			}
		},
		mounted() {
			this.getTableHeight()
			this.wfClassId = this.$route.meta.wfClassId
		},
		methods: {
			getTableHeight() {
				let contentHeight = document.getElementsByClassName('main-con')[0].offsetHeight
				let searchesHeight = document.getElementsByClassName('searches-wrapper')[0].offsetHeight
				this.$nextTick(() => {
					this.tableHeight = contentHeight - searchesHeight - 130
				})

				// this.$refs.tabRef.doLayout()
			},
			addAsset() {
				this.$router.push(`/creatAsset/${this.wfClassId}`)
			},
			editAsset(row) {
				this.$router.push(`/creatAsset/${this.wfClassId}?id=${row.id}`)
			},
			delAsset(row) {
				this.messageBox('确定删除选中数据？')
					.then(() => {
						getAction(`${assetApi.assetManage.delAsset}${row.id}`).then(res => {
							if (res.success) {
								this.$message.success(res.msg)
								this.loadData()
							} else {
								this.$message.error(res.msg)
							}
						})
					})
					.catch(() => {})
			},
			showAssetInfo(row) {
				this.$router.push(`/showAssetInfo/${row.id}`)
			},
			/**
			 * 撤回
			 * @param {*} row
			 */
			recallAsset(row) {
				this.messageBox('确定撤回选中数据？').then(res => {
					if (res.action) {
						postAction(assetApi.assetManage.assetManageCancel, {
							assetManageId: row.id,
						}).then(res => {
							this.loadData()
						})
					}
				})
			},
			/**
			 * 同意
			 * @param {*} row
			 */
			agreeAsset(row) {
				this.showAgreeWin = true
				this.selectRow = row
			},
			passHandler(row) {
				this.showFlowSend = true
				this.checkFlowType = 1
				this.sendtype = 1
				this.instNodeId = row.wfInstNodeId
			},
			onSubmitAgree() {
				postAction(assetApi.assetManage.agreeAsset, {
					assetManageId: this.selectRow.id,
				}).then(res => {
					if (res.success) {
						this.loadData()
					}
				})
				this.showAgreeWin = false
			},
			handleAgreeClose() {
				this.showAgreeWin = false
			},
			rejectHandler(row) {
				this.showFlowSend = true
				this.checkFlowType = 1
				this.sendtype = -1
				this.instNodeId = row.wfInstNodeId
			},
			flowCallback() {
				this.loadData()
			},
			/**
			 * 驳回
			 * @param {*} row
			 */
			scrapAsset(row) {
				this.$prompt('驳回原因: ', '资产登记审核驳回', {
					cancelButtonText: '取消',
					confirmButtonText: '确定',
					inputValidator: function(val) {
						return val ? true : false
						// if (val) return true
						// else return false
					},
					inputErrorMessage: '请输入驳回原因',
					inputPlaceholder: '请输入驳回原因',
				})
					.then(({ value }) => {
						postAction(assetApi.assetManage.scrapAsset, {
							assetManageId: row.id,
							backNotes: value,
						}).then(res => {
							if (res.success) {
								this.loadData()
							}
						})
					})
					.catch(() => {})
			},
			// handleScrapClose() {
			//   this.showScrapWin = false
			// },
			// onSubmitScrap() {
			//   this.$refs.scrapform.validate(valid => {
			//     if (valid) {
			//       postAction(assetApi.assetManage.scrapAsset, { assetManageId: this.selectRow.id }).then(res => {
			//       })
			//     }
			//   })
			// },
			/**
			 * 重新提交
			 * @param {*} row
			 */
			reSubmitAsset(row) {
				this.$router.push(`/creatAsset/${this.wfClassId}?id=${row.id}`)
			},
			/**
			 * 二维码
			 * @param {*} row
			 */
			showQRCode(row) {
				/**
				 * @todo
				 */
				this.selectRow = row
			},
		},
	}
</script>
<style lang="scss" scoped>
	.searches-wrapper {
		background: #ffffff;
		box-shadow: 0px 0px 12px 0px rgba(129, 155, 151, 0.3);
		border-radius: 6px;
		padding: 8px;
	}

	.card-table {
		background: #ffffff;
		padding: 15px 10px;
		margin-top: 10px;
		border-radius: 6px;
	}

	.form-item-btn {
		position: absolute;
		right: 15px;
	}

	.card-title {
		display: flex;
		justify-content: space-between;
		margin-bottom: 15px;
		height: 30px;
		align-items: center;

		.title-con {
			height: 22px;
			padding-left: 10px;
			border-left: 4px solid rgba(33, 183, 149, 1);
			font-size: 16px;
			font-family: PingFang SC;
			font-weight: bold;
			color: #000000;
		}
	}

	.stateColor0 {
		color: #02a7f0;
	}

	.stateColor1 {
		color: #f59a23;
	}

	.stateColor2 {
		color: #039d12;
	}

	.stateColor3 {
		color: #d9001b;
	}

	.stateColor4 {
		color: #555;
	}

	.text-btn-table {
		color: #409eff !important;
	}

	.dialog {
		/deep/.el-dialog__footer {
			padding: 0 !important;
		}
	}

	.dialog-footer {
		border-top: 1px solid #f0f0f0;
		display: flex;
		justify-content: flex-end;
		padding: 10px 15px;
	}
</style>
